دورة مطور الشاملة فى تصميم الاستايلات 
WWW.mtwer.com‏ 


الحمد لله رب العالمين 


و الصلاة و السلام على سيدنا محمد النبي الكريم و علي آله و صحبه أجمعين 
اهاداء.. 
إهداء لكل شخص يسعي للتعلم و الأستفادة.. 
إهداء لكل من علمني حرفا و ساعدني أن أصل الى مأنا عليه.. 


إهداء لكل مستخدم عربي يسعي ليصبح مطور.. 
إهداء خاص.. 


لمطور موقعاً و أدارة و أعضاء و زائرين 
شهرس الدورة-: 


بأذن الله تعالى هذه الدورة راح تكون فهرسها كالاتى :وأنا راعيت ان تكون البداية 
من الصفر الى ان تصل للمستوى المطلوب والذى تکون فيه قادر على تصمیم 
استايل طس بنفسك ٠‏ ثم سنتظرق للاضافات والتطويرات التى ستستخدمها لاضفاء 
لمسات تطويرية وجمالية على الاستايل 


فهرس الدورة : 


شرح تنصيب البرامج المستخدمة فى الدورة 
. الدرس الاول: أساسيات ومبادىء للتعامل مع الفوتوشوب 
. الدرس الثانى :(۸) درس تصميم الهيدر والفوتر وتقطيعه 
افرنن ا(8 هة القند مالسل الل 
. الدرس الثانى: درس توزيع الصور على الفرونت بيج 
. الدرس الثالث : شرح اعدادات ال ووم‌الخاصة بالاستايل 
. الدرس الرابع:شرح تأطير الاقسام الرئيسية 
اللرين الخامس ,شر ع تخير روايط الصورو واسقراد ملف آل وتاي 
. الدرس السادس:شرح توسيط المنتدى ووضع خلفية للمنتدى 
.١‏ الدرس السابع:شرح تطوير قالب الاقتباس والفورم جامب 
۲., الدرس الثامن:تعلم اضافات فی تطوير اعدادت الووع 
۳. الدرس التاسع:تطوير قالب ال رعهعء1_1طاومممع تعلم كيفية تطويره 


> <r io mg 


و دچ 
صے » 


وع _ 


نبدأ انطلاقة الدورة راجيا من العلى القدير ان تتم على خير 


-1السیرفر المحلی »ویفضل ۲۷عیم‌مه الاصدار ٠,١,۹‏ 


أف فا ربط اق 


-2نسخة 73.6.8 
الل اه اا ا و 
-3برنامج الفوتوشوب ٤‏ sj1ء‏ 0pطء0امطم‏ الداعم للعربية + الكيجن 
للتحميل برابط واحد فقط يدعم استكمال التحميل: 
ال ا 
ع التر وکت و ۴ ر اة فا وه ايل اتون 
للتحميل : 
اضغط هنا 
وهذا السيريال نمبر 
WFDWY-XQXJF-RHRYG-BG7RQ-BBDHM‏ 


الحجم: ٠١١‏ ميجابايت 
اولا: شرح تنصیب بر نامج ال۷اع‌؛م مھ 


اتبع الصور: 


3 Appšery 2.3.3 Setup 


Welcorne to the AppSery 2.5.9 
Setup Wizard 


This wizard will guide You through the installation of Aapp5erY 
A4, 


1 
1 
ا 


I is recommended that You close all other applications 
before starting Setup, This will nake it possible Eo update 
relevant system Files without having to reboot Your 
compuker, 


lick Next to continue, 


a 
ذا‎ 
ك٥‎ 
2 
2 
©2 


rr rrr vista-design 


PVE. CS ON 


2 AppSery 2.3.3 Setup 


setup will install app5Ery 2,5,3 in the Following Folder, To install in a different Folder, click 
Browse and select another folder, lick Next to continue, 


Choose Install Location 
Lhanse the Folder in which to install ûApp5erY 2,5,3, 


vista-design‏ يل 


OGestination Folder 


LZ AppSErY ٣ 


| Browse,,, 


Space required: 50, 4ME 
Space available: ã, ZÊ 


lsa Install SSE VE, 2A — n: 


IT E 


3 Appšery 2.3.9 Setup 


Select Components 


select the components You want to install, clear the components 
you do nat want to install, 


ûpp5ery Package Lomponents 


vista-design 
ûpache HTTP Server 

MySOL Database 

PHP Hypertext Preprocessor 


phpMyAdmin 
ا ا‎ 
0 


Lancel 


3 AppSery 2.9.3 Setup 


Apache HTTP Server Informaltion 
Please enter your server's information: 


vista-design 
Server Name E, Q, www, appsetynetwork, com} 


| localhost س‎ 


Administrator's Email Address e, g, webmaster @gmail, com} 


| ruhn corn ٠ ای شسیء‎ 


Apache HTTP Port (Gefaulk : BU} 


8 ع 


4 


کے 
ےچ 
E gt‏ _ 2 


MENEE | ع ال‎ Cancel 


E AppSery 2.5.9 Setup ك‎ 1 ۶ 


YY MySHL Ser¥er Configuration 
E Lonfigure the MySAL Server instance, = 
MySQL: vista-design 


Please enter Rook password For MySQL Serwer, 
E rook password 


Ez کوت‎ 


Re-enter root Re-enter rant password root 


|۰ - _ ~ı چ‎ ٣٥٥٤ والباسورد‎ 


MyYSHL SerYer Setting 
Character 5 eks and Callations 


یه 
[_JOld Password Support (PHP MYS2L API Function,‏ 
LIEnable InnnDB‏ 


1 lutF- 2 Unicode 


ûn‏ چ 


x Back. Install 
MMT VVERE OT o 


AppSery 2.5.9 Setup‏ ا 


7 


Lormpleting the AppSery 2.5.9 Setup 
Wizard 


ûAppSery 2,5,3 has been installed an your cornpuker, 


lick Finish to clase this wizard, vista-design 


#1 start Apache 


[™] start ا‎ ٤ Ê 4 


The AppServ Open Project - 2.5.9 for Windows 


Se, 
JÊ phpMyAdmin a o 2.102 أ سقط غا‎ 
@J PHP Informatirtın 5 ندر ادحل‎ 
0 ۲00 الیوزر‎ 
App Serw is a merging e oftware installer pack EO ,aalell gute: 


# Apache Y¥feb Server Yersion 2.2.4 
¢ PHP Script Langqergqîie gion F2 ود وك‎ 1 1 


¥ MuyCril Tliatahace ersinn Rh N AR 


بعد الضغط على ادخل اليوزر والباس هه وراح تدخل القاعدة بأذن الله 


فقط اتبع الائی: 


-1 نروح للسيرفر المحلى بكتابة اءمط[هءه] فى متصفحك ثم ادخل ل ۸إ لھ ر٣‏ مم بعد 
ادخال الیوزر والباسودر کما ذکرنا فی اخر خطوة من تنصیبنا ل۷ا‌؟م مھ 


-2راح نقوم بعمل قاعدة جديده للمنتدى 


نكتب كما فى الصورة ا۷ ونضغط تكوين ليتم تكوين القاعدة 


localhost 


ا إصدارة coarmmunity-ntiio‏ 

inn: 10 4 
vista-design ا کے‎ 
laçalhost via C۴۴ خد‎ 8 

rt @dlocal# | المستخدم:‎ 4 


@loc 
MYSAL: UTF-8 Unicode (8) 5ف‎ iia 
MySEIL connection collation: 

a uifû_unicode_ci په‎ 


| Collation اټ‎ 


ا المزود اا ۱ القاعدة 


ٍ کن صنخبرات المزود ل 5اا 
vb‏ 
معلجات ج 


مجمو عاك المحارف Pinês‏ تکوین 


Storage Engines E 


MT VER. <C ® Melnad privilecqr) 


-2ثم نقوم بنقل مجلد ال طاداخل مجلد سسس الموجود داخل المجلد الخاص بالسيرفر 
المحلأ”appserv‏ 


C:\AppServ\w ww» مسار‎ jوكيو‎ 


-3بعد نقلنا لمجلد المنتدى» نقوم بوضع الرابط التالى فى المتصفح لنبدأ خطوات تنصيب المنتدى 


http ://1ocalhost/vb/instalVinstall.php 


ثم اتبع الصور: 


4 5 http: fflocalhastfybfinstalinstall. php س‎ 4 %1 


MTWER. COM 


الخطرة 2 الارنباط بفاعدة البيانات 


vista-design‏ 1 حاو اتال بقاعدة اللات 


الأتدادات العايك 
e‏ 


| نرد ادوب کها 


ا 


webmaster localhost 


E 
osife. IF wau Fave a qad têasûn ba Wark 


rista setting =F ا‎ 


Lrward-slaSf: For Exariple EOFS, Euler eki 


aI MT 


CUI Sei mm 


ise Gustom Setting 
Belaw) 


(Specify 


ندخل يوزر وباسورد وايميل الادمن والذى سندخل به الى لوحة تحكم المنتدى 


وة 1 1 انشاء وات ادير 


1 


للوحة تجکم ارقم ال 


root‏ البريد التروني 


وعندما نصل للخطو هذه نروح نحذف مأف install.php‏ من مجاد المنتدى 


الحطوة 13 اتنسال النرتبب 


دب روك تم الت ريب بنجام, 


نتو جب ابا ا حذت الملفات التالية 
installfinstall. php‏ 


vista-design 
MM TWE RE. CC OM 


الستدر الأقصن الد 
الحجم PHF ٠‏ 
8,00 سجابایت 
zarmmunitysnt-lag-S, 0,45‏ 


1.00 تابات 


ثالثا :شرح تنصيب الفوتوشوب 


Ta cankinue, you must accept the End-User License Agreement, 
Please select the language you would like to use to read the agreement, ال‎ 


lz 


ADOBE 
Soflware License Agreement e 


ûm‏ ع 
NOTICE TO USER: PLEASE READ THIS AGREEMENT CAREFULLY. BY COPYING, INSTALLING‏ 
OR USING ALL OR ANY PORTION OF THE SOFTWARE TOU ACCEPT ALL THE TERMS AND‏ 
LN DITIONS OF THIS AGREEMENT, INCLUDINE, IN PARTICULAR THE LIMITATIONS OH:‏ 
USE CONTAINED IN SECTION 2; TRANSFERABILITY IN SECTION 4; WA TY IN‏ 
اصفط SECTIONS f AND 7; LIABILITY IN SECTION 8; AND SPECIFIC PROYISI‏ 
EXCEPTIONS IN SECTION 14. YOU AGREE THAT THIS AGREEMENT IS LIKE AY WRITTEN‏ 
NEGOTIATED AGREEMENT SIGHED BY YOU. THIS AGREEMENT IS ENFORCEEBLE‏ 
AGAINST YOU AND ANY LEGAL ENTITY THAT OBTAINED THE SOFTWARE AND ON‏ 
WHOSE BEHALF IT 13 USED: FOR EXAMPLE, IF APPLICABLE, YOUR EMPLOYER. IF YOU DO‏ 
HOT ACREE TO THE TERMS OF THIS AGREEMENT, DO NOT USE THE SOFTYARE. VISIT‏ 
HTTP FW WWADOBE.C OM FOR TERMS OF AND LIMITATIONS ON RETURNING THE‏ 


vista-design 


Decline‏ و 
MTWMERN. CON‏ 


ثم نقوم بتشغيل الكيجن المرفق مع البرنامج 


Î Adobe Creative Suite 2 Russian by ECV... E 


-Installation 
Application: 


[Photoshop CS2 3.0 ©. | 


Serial Murmber: 


[1045-1 16B-9008-3841-0560-9504 meme 


ATW aÎON 
Application: 


[Creative Suite 2 2 < 


Request Code: ل‎ 


Af swrer Code: 


نستكمل التنصيب عادی متل ای برنامج › الى ان نصل الى هذه الخطوة 
وشوف ترتيب الخطوات: 


-1راح نضغط eعأ”options activate‏ 


Adobe Photoshop Installer 
Activate Using the Interı 


Plêase take a few moments to actirate your ı 
its sofware and helps ensure that you hawe 


vista-design 


Internet Connection Detected 


Ta acliyate by tel 


س 
More Information Fr‏ 


Ta rei the License Agreement oJ hawe ã 
button, 


FELElWE OF JsE any personal‏ ج ر ا 


Informatio] button For rnare information, 


Once our Product has been activated, You r 
transfar th, acti¥atian ta another carnputer, 


Tou must activate now or 1 


Activation pkions 
ا ا ا ا ا‎ 


Alobe Pholgehog lnsli lef 


Activate Adobe Photoshop 


Please Lake a fei rurmenks bo activate taz copy of Aicbe Phakzshrap, hctirakion pe ihetts Adobe ram Hegal dal bution uf 
ks syfbmare arid helps engure hat you hêye a gerine copy of he safe, 


mw ا‎ EEC 
Activation Dtlona vista-design 
Hiei ald poni kê a activin Aba Fhekeahop? re 
O Greer he Internet 
DEY tilapia la iha iutomabel Sof lire Aelîvalen her 


اضغط هنا 


Ta ria iha Lkeraê 3 fhe Lxeraa grata __Lkeernsa Ayet] 


ng a Raion, heh Hea At akin | Aiea Homan | 
Lin man | 


ree your pia hare ber 1 tha J CEiratiors Tari a fabs l3 
tranefet the acil to aricther compuber, 
2 اک‎ 
4 Temi iil SHEBE emi ûr yr FÎ ıe able Lê caniiîize ving hg f, 


O Fp 


MOTE SD کے ا‎ 1 | gig 


-3نقوم بكتابة أل إعاصام ١٥10اهراعه‏ المحدد بالمربع الاحمر فى الكيجن كما فى الصورةء 


ثم نضغط , ٣ء‏ ممع وبعدين نرجع نكتب الرقم فى الفوتوشوب فى المربعات الفارغة 


2 


| Adobe Creative Suite 2 Russian by EV... 


Installation 


| Application: 


Fhotashop CS2 4.0 


Serial Number 


1045-1437-7293 1 
Generale | 


- Actwaliûan 


E Ei 
| Photashap C3290 


Request Cûde: 
609-8342-0291 1-2273-1961-0 


Please follow the steps below: 


1, Select your cation: [United Arab Emirates 


ا الد فط ايتن ر دب باطو در 
keygen‏ الذي ثم ا ا 2 
Tolfres:; BO00 441 B39‏ 
Direct ftoll number): {44} 20 7365 0567‏ 
ا ا و وا ان Note! See eT‏ 


3, When prompted, please provide tha folowing information: 
Serial Number; 1045 - 1275 - 2296 - DOZ - SS71 - 22 


ûctlvatian Number: | 18Û - 342 ~ 0291 - 6891 - 9373 - 1961 - 0 1 
Activation Type: Normal انر هذا وص‎ 2 1 


vista- -design 


5# 


OBB2-3904-8053-399 1-7677 


4 hen yall tezeye the Authorization Code, 


J4 = < 


generate E 


KE) 


نم الصق الرقم الناتج قى 
الهمربقات 


. 


en Jl aa |] 


Bar| 
NFER SIN 


ثم اضغط 1۷ء ويكون انتهى التنصيب ومبروك 


رابعا: بالنسبة لتنصيب الفرونت بيج › فهو ما يحتاج شىء»ء مثل ما بتنصب اللاوفيس على 
جهازك » تدخل سیریال وتکمل عادی 


والى هنا يكون انتهى الموضوع 


ecco 


الدرس الاول: أساسيات ومبادىء للتعامل مع الفوتوشوب 


بسم الله الرحمن الرحيم 
أسعد الله أوقاتكم بكل خير 


قبل أن ابد بسرد دروس التصميم الاستايلات » حبيت أسوى هذا الدرس»وهو عبارة عن 
شرح فيديو يتيح لك كيف تتعامل مع الفوتوشوب ومعرفة الاساسيات التى ينبغى كل عضو ان 
يعرفها قبل ان ابدأ فى التعامل 


مع البرنامج» لانه يوجد أعضاء ممكن لم تتعامل مع الفوتوشوب من قبل 
لذلك سويت هذا الدرس حتى تعرف الاساسيات قبل الخوض فى أساس الدورة 


والدرس راح تتعلم معه بأذن الله الاتى: 
-1كيفية عمل جديد بالمقاسات اللى تريدها 
-2شرح القائمة اليمنى الخاصة بالادوات واعطاء مثال سريع لاستخدامها 
-3شرح قائمة الليرات والتحكم فيها بكل سهولة 
-4كيفية تطبيق التأثيرات على العمل اللى نشتغل عليه ويشمل ذلك: 
اولا: الءع]sty‏ 
ڎlيoptionsJl!:l blending‏ 
lliڈا:filtersÛl‏ 
رابعا:تطبيق عملى سريع نستخدم فيه كل ما أمكن من الاداوت المتاحة +كيفية تصدير العمل 


نعود معكم من جديد ونبدأً الشغل الجد 


وراح ابشركم ان تطبيقنا هو تصميم استايل مطور الموجود حاليا بكل بساطة وخفة 


اولا : نقتح عمل جدید بمقاسات 666۷۷۷ × 


Fame: | Untitled-1 
Preset; | Custom ل‎ ¬ 


width: [777 gg ie ا‎ 

Haight: |566 — pixels ا‎ Delete Preset... 
ET : : : 1 
Resolution: |300 > ا‎ pixelsyinch 3 
B8 bit ا‎ 

Image 5İze! 
a 1.48 
mm 
sta-design 


ثم نقوم بأختيار اللون اللى راح نرسم بيه كلا من الهيدر والفوتر ( الكحلى ( 
شوف.....ولاحظ رقم اللون 


| 
MIWER.COM 0 


اولا: تصميم الهيدر: 
نقوم بأختيار اداة رسم الاشكال كما بالصورة ونقوم برسم مستطيل بمقدار عمودين علويين 


am, j| | [ [Only Web Cola 


gj led-1 & û0. 7% (Shape 1, ROBIB] 


rey 1‏ 
۷ ۲ اپفقدار مریعین علویین a‏ 


ملحوظه: ( اضغط '٣+[]ءc‏ حتی یتقسم العمل الی مربعات ۔۔ (او من wعاں‏ فوق ثم W٥طء‏ ثم 


grid 
الخ احظ الور لسرت لور على جیاز ف رق بار ادها لی اله تنوب‎ 
openpifile 


خطوتك الذولى من مستخدم الى مطور 


بعدين نختار بأداة التحديد المنقطة الجزء الاوسط ما عدا الاجزاء العلوية والسفلية 
ثم نضغط + 1ع للذ 


EK 


1 


IE 
ر‎ 


E 


YT 
PCR 


e 


خطوتك النولى من مستخدم الى مطور 


GM GZ 
دا‎ 


ا 


8 Dac; 14F SEF LAF 3K ۴ 


0 
2 vista-design 


MTWER.C OM Kn‏ ا ا 
E1. KÊ 1‏ 


ثم نروح للعمل اللى احا شغالين عليه وبعدين اضغط #+اإان للصق الصورة فى العمل 


ayer 1, RUBS] 


د 


OE 


47| 


Untitled-1 @ ÖB. 7% Layer 1, RGE/E) 


- 
OS KZA 


ctrl +v 


للصي 


م 


a aF i7 
E ag E 


2 


اا ج 
a‏ 


خطوتك الذولى من مستكحم الى مطور 
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ا‎ 


MTWER.T O 


نختار بأداة التحريك ونحرك الصورة لليسار كما بالصورة... 


* 


شوف... 


Î Layer 1, RGB/B] 


| 


HDI 
ا‎ 


E‏ ر 


4 

خطوتت الدولى من مستخدم الى مطور 2ط 

27 7¬ 

$ ولا تنسی انك تکون علی | ,ن 

E‏ بر الصورة حتى تتحرك | 1 ۾ 
MT vv E Ft . RE ii‏ ¢ 


أ 


باستخدام اداة الاشكال »نرسم مستطيل سفلى واخر علوى 
شوف e‏ 


1 
ا 


ntitled-1 û bG. % (Shape 4, EGBIB) 


e 
پا‎ 


a 


jA ۹ 


خطوتت الاولی من مستخذم الى مطور 
a Di e‏ 
vista-design‏ #4 


نقوم بتطبيق الكلام السابق بالظبط على الصورة اليمنى 


EET ST NI BF 


1 


ال ج 
يک در 


احفظها على جهازه وسوی مثل السابق 


PS DH ASR 


ES n 
| Normal | pacity: | 100% F | 
Leck: EJ 1 ك‎ Fill: 100% * | 1 


2 mm i Shapes 4 ن‎ 3 


E 


HL 


اسقل 
لير العستطيل السقفلي 
حتنی تگون الصورة ورا 


0 TWEFR 


نأتى الان لكى نزيل حواف الصورة حتى يكون شكل الهيدر حلو 


راح نس نستخدم اداة الممحاة بترکیز 45 


vista-design 


+ | Brush: 
س‎ 1 


Made: [Brush ¥ Opacity: | 10095 * | Flow: | 1oo * | | Erase ta History‏ ا 


e 
Master Giarmeker E. 1 5 > E 


سا 


al 
نختار هذ المعحاة‎ 
Hardness: | o% E ر ا‎ 


i کک‎ 


e CHER 


َ 


1 چ‎ û f° & 
E Oe 


€ 


اہ با 


تا 
چ 


FE 


8 


بهيك نكون سوينا الهيدر بكل خفة وبساطة 


4 


گے 
ر 
0 
ِ4 
a»‏ 
1 


. 


Ul 
u 


YF 


۴ : ر" ت 3 4 8 1 
acikty:‏ 


Shape 3 


ا 2 کک ص 


E Layer ã 3 
1 EEL E EEE A WER .c O 


الحين انتهينا من التصميم ا 


اولا: قواعد أساسية قبل ان نكمل: 


-1يجب وانت بتقطع لازم تكون الاطوال نفس الشىء 
-2يجب ان تكون نقطة التمدد منطقة صافية ما فيها شىء 


وللاطلاع على نقطة التمدد أكثر » راح اضع موضوع فى نهاية الدرس بخصوص نقطة التمدد 


شوف الهيدر بما انه صورتين »> صورة يسار وصورة يمين 
راح نقوم بتقسیمة کالاتی: 


-[جزء ايسر 
-2جزء اوسط (نقطة اأتمدد ) 
-3جزء آيمن 


1 
“| 


gŞëÈëۉŞۉۆڇۆڇڇچgg‎ 13 5 


االرتيسيم التكر اجن اا يف عي ا ریخ 


| 


EDL 


© Hê 


EH ASHER 


|g # 


5 & 


ت“ 
3 


لافط تتت ارقاة انر 1 
5,6,7 
وهذا صعنان أن التقطيج سلب 
وراج بطلع مظبوط 
ولاز نون الخو ال قتل وخ 
HM E‏ 


ALE MAE 
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Default Settings پت‎ 
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بهيك يكون انتهى الدرس الاول.... 


نرجو من جميع الاعضاء تطبیق الدرس حتی نری شغل كل عضو 
ونعطى التوجيه المناسب 


ریک خرن کے لون القت الا جد ان بخ ماقف الرس التاتى 


آتمنی يكون عجبكم 
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بسم الله الرحمن الرحيم 


اليوم درسنا خفيف على القلب خالى من الكوليسترول للى يحبوا يتقنوا استخدام نقطة التمدد 
اولا :ما هى نقطة التمدد : هى عبارة عن منطفة فى التصميم» تتمدد بحسب عرض الشاشة حتى 
سؤال :هل لازم نقطة التمدد فى تصميم الاستايلات 
جواب :لا » مو شرط لان هناك نوعین فی تصمیم الاستایلات ۱- استایلات متمدده ۲-استيلات 
غير متمدده 
طب هل معنى ان ذلك ان الاستيلات غير المتمددة راح تكون مشكلة؟ 


جواب : لا طبعا لاننا بنتفادى هذه النقطة اثناء تصميمنا 


اولا : نقطة التمدد اين يكون مكانها فى التصميء؟ 


جواب :هذا بيعتمد على نوع التصميم اللى أنت بتسويه وراح نأخذ كم مثال حلوين عشان أوضح 
کلامی 


اولا :اذا كان التصمیم بسيط جدا ما فيه اى شىء مجرد لون فقط 
فنقطة التمدد تمشى فى اى مكان فى التصميم »وطبعا يفضل الوسط 


ونه نقطة تمدد واحده تکفی د للتصميم 


ثانيا: طب نفرض ان تصميمنا مو بسيط , وكان تصميمنا فيه شوية حركات متلا اى كلمة او 
فى هذه الحالة : لازم تكون نقطة التمدد مكانها يتوفر فيه الشروط الاتية: 


-1ان یکون مکان نقطة التمدد مکان صافی ما فيه ای شیء ( یعنی لا کلام ولا نقط ولا ای 


شىء( 
-2ان يكون على جانبى نقطة التمدد مباشرة نفس الللون(يعنى اليسار مثلا اليمين( 
وانا اقصد اللى بجانب نقطة التمدد مباشرة يعنى مسافة صعغيرة فقط 


-3و هذه هم شىء ان نقطة التمدد تكون فى الوسط بشرط » ان يسار التصميم فيه صوره او كلام 
او ای شىء» ویمین التصميم كذلك 


:.....اوکی خلونا نشوف هالمتال 


فى هالمثال: نقطة تمدد واحدة فقط + فى المنتصف لانه توفرت الشروط اللى فوق 
A) _ Sacom ۷‏ 
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ثالثا :طب فرض ان التصميم كان معقد ( صور يمين وصور يسار وصور بالنص( 
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جواب: هنا لازم نتوقف شوی , 


فى هذه الحالة سنضطر لاستخدام نقطتين تمدد مو واحده ل 
طب لیش؟ 


تمدد 


-1بين الصورة اللى على اليسار والصورة اللى بالوسط 
-2بين الوصرة اللى على اليمين والصورة اللى باللوسط 


وطبعا لازم تكون المنطقة اللى فيها نقطة التمدد صافيه ما فيها شىء مثل ما قلنا 


ودايما تذكر قانون الفيزياء اللى بيقول : كل قوتين متساويتين فى المقدار »متضادتين فى الاتجاه › 
محصلتهم تکون صفر . 
يعنى بهيك نقطة التمدد اللى على اليسار راح تعاكس اتجاه نقطة التمدد اللى باليمين وبالتالى 
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رابعا :طب ماذا لوکان الاستایل معقد جدا ( کله صور فی صور ولا فيه اى مكان لاضف نقطة 
تمددر( 


وآ طعا نا افد التضميم المد » التصميم اللى ما قد هكان ار مكائن فرفر ف القروط 
الاتيه: 


-1انه مش صافى( يعنى منطقة من فوق لتحت نفس الشىء( 
-2انه علی جانبیها ما فيه تطابق 


الحل طبعا مع هذا النوع من الاستايلات 
اننا نسويه استايل غير متمدد » لتجنب مشكلة نقطة التمدد 
وإالى هنا ينتهى موضوعنا 
أتمنى تكونوا فهمتوا الدرس 


وطبعا فيه طرق اخرى ان شاء الله راح أتطرق إليها 


الدرس الثالث: درس توزيع الصور على الفرونت بيج 


فيع 


: نستكمل معكم مشوار الدورة 
فى الجزء الاول كنا انتهينا من تقطيع الهيدر والفوتر»ء ونتج لنا ملف وععه.] بالصور 


الحين راح نأتى للخطوة القادمة » وهى توزيع هذه الصور على الفرونت بيج ,حتى ننتج كود 
البيدر و الفوتر اللي راح نكغه فى الإستال اللي راح نجه قى انرية 


اولا :افتح برنامج الفرونت بیج ۲۰۰۳ »واول ما یفتح راح نقوم بحذف ای اکواد موجوده 
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الحين لو تتذكر لما قمنا بالتقطيع» قمنا بتطقطيع الهيدر الى ثلاثة اجزء › والفوتر كذلك لثلاثة 
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الحين بدنا نرجع لمجلد يمعٍه .]1 الذى نتج لما انتهينا من حفظ العمل فى الفوتوشوب 
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الحين راح نقوم باضافة كل صورة للجدول الخاص بها 


الجزء الايسشر: 


نضغط على الجدول الايسر العلوى» ثم نضغط على ايقونة اضافة صورة ونضيف صورة الجزء 
الايسر للهيدر 


وراح يكون هيك الشکل النھائی: 


خطونك الذولی ون مستخدم الى مطور 
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الحين راح نترك الجدول الاوسط فاضى » الواقع بين الثلاثة جداول العلوية والسفلية 


وننزل للثلاثة جداول السفلية الخاصة بالفوتر» ونطبق بالظبط مثل ما سوينا بالهيدر 


خطوتك الذولی من وستخدم الى وطور 
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الحین راح نقوم بظبط کل شىء حتى يتوافق ويركب على المنتدى.... 


اولا: نروح نزيل سمك الجداول 
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ونطبق بالظبط هالكلام » على الجدول الاوسط الواقع بين الهيدر والفوتر 
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شوف الشكل النهائی 


خطوتك النولی ون وستخدو ال وطور 
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اولا:‎ 


بالنسبة لصورة الجدول الايسر العلوى 
ذل كك عن الصررة براح يطل لك مقاسات الصدررة احفظةا فى يااك 
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ثم كليك يمين على الصورة الیسری »۰ ونختارءم )مهام ce11‏ 
وبعدين راح نضيف هالمقاسات متل اللى بالصورة: 
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Specify width:‏ 
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بعدين نطبق الكلام بالظبط على الصورة الاتية 
صورة الجزء الايمن --هيدر 
صورة الجزء الايسر--فوتر 
صورة الجزء الايمن -- فوتر 


)لاحظ اننا تركنا صورة الجزء الاوسط للهيدر والفوتر( 
الحين + بعد اطا الكلد, اماق على اتسور اللى فا ها 
وطبعا لا تنسی انه کل صورة ليه مقاس مختلف » راح نحفظه ونحطه فیءع 1٤۵۲م‏ ٥۲م-‏ 11ع 
المهم» راح نرجع الحين لصورة الجزء الاوسط للهيدر والفوتر 
شوف بالنسبة صورة الجزء الاوسط للهيدر 


راح نضغط على صورة الجزء الاوسط دبل كليك 
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الحين نقوم بعمل ما قمنا به بالظبط على صورة الجزء الاوسط للفوتر 


ویکون الشکل النهائی کالاتی: 
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الحين انتهينا والحمدلله من التوزيع 
راح نقوم بأخذ كود الهيدر والفوتر 
لكن قبل هذا 
قم بالظغط على الجدول الاوسط بين الهيدر والفوتر ثم نضغط على التوسيط 
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خطوتك الذولی من مستخدم الى مطور 
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الحين نضغط فى اسفل البرنامج على كلمةعلهء 
وشوف كيف راح نأخذ كود الهيدر وكود الفوتر 


المطلل هو کود الهيدر > Zhtul dirt="rtl"‏ 
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لاحظ اننا ترگنا هذه 
المظلله بالأصفر 
وهذا نقطة النوسيط 
اللى سویناها 
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الحين تمام خلصنا من كل شىء 


رفک لا اك 


ومن الاستايلات والقوالب ۔۔ ثم التحكم بالاستايلات ثم اذهب 


بالنسبة للهيدر 


$spacer_ open 
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phpinclude GUtput. 


1" ConNTERtE= Zi 


راح نترك الكود الموجود كله 
وراح نضع الكود اللى حفظناه بالمفكرة مباشرة بعد الكود الموجود 
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vista-desig‏ راع نضيف الكود اللى 
نات مباشرة بعد 
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الحين روح شوف المنتدى 


مبروك على تركيب الهيدر والفوتر 


آهل وسهاڈ بك زائرنا الكرب, إذا كانت هذه زيار الأولى للمنةى؛ فبرجى النكرم بزبارة صسقحة الشعلوات» بالضغط هنا. كا بشرقا أن تقوم بالنسجبل بالضغط هنا إذا رغبت بالمشاركة في المندى. سا إذا رغبت 
بقراءة المواضيع والإطلا ع فقضل بزيارة القسم الذي ترغب ئاد 


مشاه العواضة | انمضاریت 
0 
ر | ققش إلهادف وإلبناء وإوإضيع الاه 


ملحوظه :صور الهيدر والفوتر لن تظهر وانت على متصفح فايرفوكس لاننا لسه ما جينا لتعديل 
الروابط 
للك بقل تشن قرفت الاکسرری کی توف تات لعن 


ملاح طط هه 
® للذين يعانون من اللغة مع انى مو شايف فيها مشكلة 


table prope] )1عs=لودجلا خصائص‎ 
cell proper خصائص الخلية= ءع1†‎ 
page sع†ںم=ةحفصلا اعدادات‎ 
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غير هيك ما فی 


بالتوفيق 


الدرس الرابع 1 شرح اعدادات ال وومالخاصة بالاستايل 


بسم الله الرحمن الرحيم 


وع __ 


نستكمل معكم اعضاءنا الكرام بما بدأنا به, 


واليوم شرحنا مع درس مهم لاضافة اللمسات النهائية للاستايل, 
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ال ووعوالتى راح نعدل عليها لنقوم بتنسيق الالوان والكتابة وكل شىء 
فا هات اعات ا 
کک و اک کے اھ د 
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الحين كل ما عليك انك تحمل شرح الفيديو لاعدادات الووء 
وانت بتشوف الفيديو» انظر لهذه الصور حتى تعرف اين التعديل 


وايضا فى الفيديو انا شارح عليهم» لكن حبيت اضعهم بالموضوع 
حتى تستقر الفكرة فى الاذهان © 


والشرح مفسم لجزئين 


الجزء الاول حمل من هنا 
الحجم 13 :ميجا 
الجزء الثانى حمل من هنا 


الحجم 6 :ميجا 


وطبعا فى الدرس الاول : 
راح نشرح الجدوال الاتية: 
جدول رهط 
جدول خلفية الصفbackgroungzi‏ 
جدول حدود الجدول 
جدول نهاية الجدول 
جدول لون التوزيع الاول 
جدول لون التوزيع الثانى 
جدول محرر۷¥۷S1W۷g‏ 
جدول ابراز العنصر الادارى 
جدول التحكم بالقوائم المنبثقة 
جدول جسم قائمة الانبثاق 


جدول خيار سطوع القوائم المنبثقة 


جدول قائمة الانتقال السريع 


وهذه الجداول هى الجداول التى راح نسوى لها صورة على هيئة لون او ندرج 
لذلك تم جمعھا فی درس منفصل 


مع ان الفكرة واحده 3 
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بسم الله الرحمن الرحيم 


نستکمل معکم ما بدأنا به 
وناتی لدرس تاطير الاقسام 


اولا: شرح كيفية عمل التأطير على الفوتوشوب + تقطيعه +تصديره 
الشرح فيديو 
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الحجم: ٠١‏ ميجا 
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ثانيا: توزيع صور التأطير على الفرونت بيج حول الاقسام 
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-3بما ان الاقسام فى مطور مفصولة , راح نستخدم قالبين جاهزين للعمل عليهم 
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شوفت ءالتوزيع بالعكس , 
طبعا كل جدول راح تستودر الصوره الخاصة به 
وتسوى مثل ما شرحنا فى تصميم الهيدر ) لكن بالعكس( 
وحتى تعرف ارقام الصور اللى راح تضفها لكل جدول 
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الحين نأتى الظبط‎ 

-9او لا / 
ف ال و 
راح نجعلهم خلية 
راح أعطى مثال على صورة واحدة وتطبق الباقى على الصور الباقية 
الحين دبل كليك على الصورة رقم ٤‏ ثم نحفظ ارقام المقاسات 
الحين وانت على نفس الصورة(٤)‏ › اضغط كليك يمين تم اختار وع) cell proper‏ 
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وهذه راح نجلعها خلفية 


طبعا هالموضوع شرحته من قبل فى درسنا السابق(تصميم الهيدر والفوتر( 
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شوف راح نضغط دبل كليك على الصوره 
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بالمثل نسوى ذلك على الجداول السفلية 
TS‏ 
كليك یمین ڌم |ختlر table properties‏ 
ونصفر ونوسط القيم كالسابق 
الحين نروح نضغط على كلمة كود م لمع باسفل الفرونت بيج 


ونقوم بنسخ الكود كله.... 


ونحفظه فى مفكرة 


والحين 
رسا تك ادن د اسنات ر اتر الت ف الست فى اقرا 


ثم نقوم بالبحث عن lلئبforumhome_forumbit‏ 


البحث في العناصن ققط 


ونحذف الكود الموجود ونستبدله بالكود اللى فى المرفق اللى اسمه 


forumhome forumbit levell nopost 
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بالمثتل نروح نبحث فى القوالب عن قالب عص 0ط ص ن۲م تم نمسح الكود الموجود ونستبدله 
بالقالب المرفق اللى اسمهعدصforumho‏ 


لذا تتطلب تعديل لهالقالبين 


الحين نروح للمنتدى ونشوف 


ا هدا الشكل النهانى nn. TE‏ 
REE‏ ر کر 
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والی هنا ينتهى الدرس 


الدرس السادس:شرح تغییر روابط الصور واستیراد ملف ال او للاستایل 


وع 


بسم الله الرحمن الرحيم 


والان الحين بعد ما أنجزنا تقريبا الجزء الاكبر من الدورة 
الخطوات: 


-1قم بعمل ملف جدید داخل مجلد المنتدی , ا وسمیهھ we‏ وھذا 
راح يكون مجلد الصور الخاصة بالاستايل 


-2قم بعمل ملف جدید داخل مجلد ۲مس" وسمیه ٣1ھ"‏ 
وهذا راح نضع به صور الهيدر والفوتر والتاطير 


-4قم بأخذ صور الهيدر +الفوتر+تأطير الاقسام الرئيسية وضعها بهذا المجلدم زوم 


-5الحين روح للوحة تحكم المنتدى وتوجه للاستايلات والقوالب 
ثم قم بنسخ كود الهيدر كله» وافتح الفرونت بيج والصقة فى صفحة الكود 


-6الحين شوف الصورةء راح نقوم بمسح هذا الجزء فى كل الصور 
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-8الحين نطبق هذا الكلام بالظبط على كود الفوتر وقالب forumhome_level1 nopost‏ 
اللى فما فه تاطبر الاقام تاخذه وتر روايط الضور الخاضة مت الى فرق بالط 


-9بعد الانتهاء من هذا راح نتوجه الى اعدادات ال وومونغير روابط مجلدات الصور الاخرى 
شوف الصورة e‏ 


صسار صجلد الصږPaths/j Image‏ 


ز يني قي تداك 
mbwer buttons‏ 


بإعداذات اللحة 


mlwerfstalusican O 
الال الحصوات هال سا ا ا‎ 


mtwer attach 


miter frnisE 


لح نضنقا قي النفانيتق الاحرهية 
۴ 
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mbwer polls 
جتلفغة العحضوة لناء الحقول الحملقة قي ناتخ تلصوت الان‎ 


myer rakin 
1 تحتل لتصوز التقنيز العام التقدذم لحنصز لغادة ما يخوت موصسوعةا‎ 


- الحالة er ireputakian‏ 
جحضق الجالبكة 


lT WE f. 2 الصتنوعات ا‎ 


-10بعد هيك ننزل لتحت ونشوف الجداول التى بها مسار صورة التدرج 
وهذه الجداول هى 
الأقسام الرأيسيةStrips /Category‏ 
رİس‏ llئجدوHeaderJ /Table‏ 
/Panel Surroundحولl bın‏ 
lللوحة‏ )اأشForsJlS YPanel‏ 


نقوم بتغيير مسار الصورة كالتالى: 
مثال: 
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الخلفية 
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إلروابط المزا 
الخلفية 
لون الخط لون الخط 


زخزقة النضص إخوفة التص 


أعادة شذه المجموعة من الإعدادات إلى قيمتها المورا 
TET TT i. MED‏ ا 
TA Hie‏ 


-11الحين بعد ما انتهينا من هذا » نروج لمجلد المنتدى طب وندخل مجلدومعه1 
ثم ننسخ المجلدات المشار اليها بالصورة» ونقوم بلصقها داخل مجلد ۲٥س‏ اللى سويناه 
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-12الحين هيك ملف الصور صار جاهز 
-13باقى الحين استيراد ملف الاستايل]رر× 
اضغط من الاستايلات والقوالب على اليمين على خيار ( رفع تحميل استايل( 


ثم نکتب اسم للاستایل 


ثم نضغط تنزيل 
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في شذا الستايل د كل الاستابلات الرتسية 


الخين صا ااال جاه 
ولو بدك ترکبه علی ای منتدی قم بعمل الاتی: 


-1قم برفع مجلد الصور ۲ع سا داخل مجلدا۷ 
ك ازرد ملت و من الاست دت وار الب رقع تحفل اين 
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او وکر کک کا کے لارا eg‏ 


ثم راح يفتح لنا قالب 


فد لقب ار قق 


الحين نقوم بنقل مجلد الصور المرفق واللى اسمهوعامuي‏ 
والمجلد مرفق مع الموضوع 
ونضعه داخل مجلد ال ٥وزص‌الموجود‏ داخل مجلد الوعع 1"2 


ملاحظه :هذا الموضوع ليس له علاقة بالدروس القديمة عندما قمنا بتغيير 
مسار مجلد الصور من sءععھ‏ ص1 الیإmtwe‏ 


تى السن رین غاد غلل النحة الف أك الكاص بالكى 


تما فا واا 


نروح للمنتدی ونکتب اى موضوع ونشوف الشغل 


llrororoBDEDEDEDEGEO 1 root 
“ نیزر عاد‎ 
LÎ Jul 2003 ا‎ 
يقال نمام‎ rogüoinoodonogiooonk 1 : موية‎ 
[ : ات‎ 
10 : اط‎ 
lol 111111 0 
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MT WERT ON rn 


وع __ 


الحين نأتى لتطوير قالب الفورم جامب 
اولا نقوم بفتح عمل جدید على الفوتوشوب 


بمقاسات 
العرض ٠١‏ والارتفاع190 


Narmë: Intitled-1 


j Preset: LLISTOM || 1 


width: اڪ 0ا‎ pikes 
Height: ڪي ا‎ 
Resolution: |72 | pixelsfinch 
color Mode: | RGB Color ا‎ @ bit 


Background Zontents: | White 


¥ Advanced - vista-design 


ثم نقوم برسم مستطيل ونعطيه لون مناسب للون الاستايل اللى تعمل عليه 
ونكتب مثلا كلمة هع وطبعا انت ومهارتك ممكن تسوى اللى بدك ايا 


وهذا مثال لشغلى البسيط 


" go.gif a 100% (... EK 


الحين نقوم بحفظ هذه الصورة باسم مع بامتداد ۴ع داخل مجلد 
عو الموجود داخل مجلد الصور وعع2 1 


الحين نروح للوحة تحكم المنتدى ونقوم بالبحث فى القوالب عن 
اقب forumj ump‏ 


خث في الستابل 


ا عن النص 


حت في العناصن ققط 


اليجنا إسننجادذة 


ن بال لقف ال جره الي لمرن 
ولاحظ انه وانت بتسوی استایل جدید 
راح تحتاج الى انك تغير مسار صورة على حسب اسم مجلد الاستايل 


وراح يكون التعديل من هذا القالب فى نهايته 


3 frujupses1l [=1 


$ ErujupF s51 [vw 


e ا‎ 


روح شوف شکله فی المنتدی 
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MTVVER.C O Ml Kn 


انتهى الدرس 


تحیاتی 


" 
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